<template>
  <div class="list-view">
    <div v-for="(item,index) in listData" :key="index" class="item">
      <span class="icon">
        <svg :fill="item.iconColor"><use :xlink:href="item.icon"></use></svg>
      </span>
      <div class="info">{{item.info}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name:"ListView",
    props:{
      listData:{
        type:Array,
        default(){
          return []
        }
      }
    }
  }
</script>

<style scoped>
   .list-view {
     background-color: #fff;
     font-size: 16px;
     color: #333;
   }
   
   .list-view .item {
     position: relative;
     height: 44px;
     line-height: 44px;
     padding: 0 1px;
   }

   .icon svg {
     width: 21px;
     height: 21px;
   }

   .item .icon {
     position: absolute;
     margin-left: 15px;
     top: 5px;
   }
   
   .item .info {
     margin-left: 48px;
     border-bottom: 2px solid #f2f2f2;
   }

   .item:last-of-type .info {
     border-bottom: 0;
   }
</style>